{% extends 'layout/base.html' %}
{% load static %}
{% load custom_tag %}
{% block title %}分类 | {% endblock %}
{% block banner%}
<div class="bg-cover pd-header about-cover">
    <div class="container">
        {% include 'layout/banner.html' %}
    </div>
</div>
{% endblock %}
{% block css%}
        <style>
        .category_tag-1{
            background-color: #F9EBEA;
        }

        .category_tag-2{
            background-color: #F5EEF8;
        }

        .category_tag-3{
            background-color: #D5F5E3;
        }

        .category_tag-4{
            background-color: #E8F8F5;
        }
        .category_tag-5{
            background-color: #ddf9e7;
        }

        .category_tag-6{
            background-color: #d2d6f8;
        }

        .category_tag-7{
            background-color: #f5deba;
        }

        .category_tag-8{
            background-color: #f8f6c8;
        }

        .category_tag-9{
            background-color: #d8f5c1;
        }

        .category_tag-10{
            background-color: #def8f8;
        }

    </style>
{% endblock %}
{% block contents %}
<main class="content">
<div id="category-cloud" class="container chip-container">
    <div class="card">
        <div class="card-content">
            <div class="tag-title center-align">
                <i class="fas fa-bookmark"></i>&nbsp;&nbsp;文章分类
            </div>
            <div class="tag-chips">
               {% for category in categories %}
                <a href="{% url 'article_category' category.id %}" title="Python: 4">
                    <span class="chip center-align waves-effect waves-light
                             chip-default category_tag-{% random_num %}">{{category.name}}
                        <span class="tag-length">{{category.get_items}}</span>
                    </span>
                </a>
               {% endfor %}
            </div>
        </div>
    </div>
</div>

    <article id="articles" class="container articles" style="position: relative; height: 2816px;">
        <div class="row tags-posts">
                {% for article in articles %}
            <div class="article tag-post col s12 m6 l4 aos-init" data-aos="zoom-in" style="position: absolute; left: 0px; top: 2411px;">
                <div class="card">
                    <a href="{% url 'article_detail' article.id %}">
                        <div class="card-image tag-image">
                            <img src="{{ article.cover }}" class="responsive-img" alt="{{ article.title }}">
                            <span class="card-title">{{ article.title }}</span>
                        </div>
                    </a>
                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            {{ article.desc }}
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>{{ article.add_time }}
                            </span>
                            <span class="publish-author">
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                <a href="{% url 'article_category' article.category_id %}" class="post-category">
                                    {{ article.category }}
                                </a>
                            </span>
                        </div>
                    </div>
                    <div class="card-action article-tags">
                        {% for tag in  article.tag.all %}
                        <a href="">
                            <span class="chip tag-color">{{ tag }}</span>
                        </a>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </article>

</main>

{% endblock %}
